<template>
  <div class="otherHome">
    <Other-Header bgColor="#5741d9"></Other-Header>
    <div class="workOraderBox">
      <!-- 面包屑crumbs-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{$t('l.home')}}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/announcement', query: {type: 1} }">{{$t('l.other_a_4')}}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/workManage' }">{{$t('l.other_a_5')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('l.other_a_13')}}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 内容 -->
      <div class="workOraderDetails">
        <div class="workOraderID">
          <router-link to="/workManage" class="goback">{{$t('l.other_a_30')}}</router-link>
          <ul class>
            <li class>
              <label for>{{$t('l.other_a_16')}}</label>
              <span>{{orderInfo.orderNumber}}</span>
            </li>
            <li class>
              <label for>{{$t('l.other_a_52')}}</label>
              <span>{{type[orderInfo.type]}}</span>
            </li>
            <li class>
              <label for>{{$t('l.other_a_26')}}</label>
              <span class="feedback" v-if="orderInfo.status==2">{{$t('l.other_a_22')}}</span>
              <span v-else>{{$t('l.other_a_21')}}</span>
            </li>
          </ul>
        </div>
        <div class="workOraderCon">
          <div class="workOraderConTit">
            <h5 class>{{orderInfo.title}}</h5>
            <span class>{{orderInfo.createTime}}</span>
          </div>
          <p class="workOraderInfo">{{orderInfo.content}}</p>
          <ul class="orderImg">
            <li v-for="item in orderInfo.sysWorkSheetPicture" :key="item.id">
              <img :src="item.picPath" :alt="item.picName" class />
            </li>
          </ul>
          <div class="reply" v-show="orderInfo.status==2">
            <div class="replyInfo" v-show="Object.keys(reply).length">
              <label for class="replyUser">{{$t('l.other_a_28')}}</label>
              <span
                class="replyUserID"
              >{{reply.userName}} {{reply.userId}}</span>
              <span class="replyTime">{{reply.createTime}}</span>
            </div>
            <p v-html="reply.replyContent"></p>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";

export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      type: {},
      orderInfo: {},
      reply: {}
    };
  },
  created() {
    this.findDictList();
    this.getWorkOrderDetail(this.$route.query.workOrderId);
  },
  methods: {
    async findDictList() {
      let res = await api.selectList({
        language: this.$i18n.locale,
        category: "workSheetsType"
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.type = data.reduce((acc, cur) => {
          acc[cur.value] = cur.name;
          return acc;
        }, {});
      }
    },
    async getWorkOrderDetail(workOrderId) {
      let res = await api.jobInfo(workOrderId);
      let { code, data, msg } = res.data;

      if (code == 0) {
        // console.log(data);
        this.orderInfo = Object.assign({}, data);
        this.reply = Object.assign({}, data.sysWorkSheetsReplys[0]);
      } else {
        this.$layer.msg(msg);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.otherHome {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-bottom: 160px;
  padding-top: 100px;
}
.workOraderBox {
  width: 1200px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;

  /* 面包屑 */
  /deep/.el-breadcrumb__inner a,
  /deep/.el-breadcrumb__inner.is-link {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 56, 94, .5);
  }
  /deep/span.el-breadcrumb__item:last-child span {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: #2D8DFE;
  }
  /* 内容 */
  .workOraderDetails {
    width: 1200px;
    min-height: 790px;
    background: rgba(255, 255, 255, 1);
  }
  .workOraderID {
    height: 80px;
    background: linear-gradient(
      180deg,
      rgba(247, 247, 255, 0.6) 0%,
      rgba(240, 242, 253, 0.6) 100%
    );
    padding: 0 103px 0 63px;
    .goback {
      float: right;
      width: 72px;
      height: 32px;
      border-radius: 4px;
      border: 1px solid rgba(221, 224, 235, 1);
      font-size: 14px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 1);
      line-height: 32px;
      text-align: center;
      margin-top: 25px;
    }
    ul {
      white-space: nowrap;
      li {
        display: inline-block;
        vertical-align: top;
        font-size: 0;
        min-width: 25%;
        padding-right: 20px;
        height: 80px;
        line-height: 80px;
        white-space: nowrap;
        label {
          display: inline-block;
          // width: 64px;
          font-size: 16px;
          font-familyA: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(51, 56, 94, 1);
          margin-right: 30px;
        }
        span {
          font-size: 16px;
          font-familyA: OpenSans;
          color: rgba(51, 56, 94, 1);
        }
        span.feedback {
          color: #0da88b;
        }
      }
    }
  }
  .workOraderCon {
    padding: 34px 63px 0;
    .workOraderConTit {
      height: 28px;
      font-size: 0;
      margin-bottom: 35px;
      h5 {
        display: inline-block;
        vertical-align: middle;
        font-size: 20px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 56, 94, 1);
        line-height: 28px;
        margin-right: 25px;
      }
      span {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        font-familyA: OpenSans;
        color: rgba(51, 56, 94, 1);
        line-height: 19px;
        opacity: 0.5;
      }
    }
    .workOraderInfo {
      width: 926px;
      font-size: 14px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 1);
      line-height: 26px;
      margin-bottom: 38px;
    }
    ul.orderImg {
      font-size: 0;
      margin-bottom: 50px;
      li {
        display: inline-block;
        vertical-align: middle;
        width: 140px;
        height: 140px;
        background: rgba(235, 236, 240, 1);
        border-radius: 4px;
        text-align: center;
        margin-right: 30px;
        img {
          width: 50%;
          height: 50%;
          position: relative;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .reply {
      width: 100%;
      min-height: 240px;
      background: linear-gradient(
        180deg,
        rgba(247, 247, 255, 0.6) 0%,
        rgba(240, 242, 253, 0.6) 100%
      );
      padding: 30px 36px;
      box-sizing: border-box;
      > p {
        font-size: 14px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 56, 94, 1);
        line-height: 30px;
      }
      .replyInfo {
        height: 22px;
        line-height: 22px;
        margin-bottom: 23px;
      }
      .replyUser {
        display: inline-block;
        font-size: 16px;
        font-familyA: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(51, 56, 94, 1);
        margin-right: 30px;
      }
      .replyUserID {
        font-size: 16px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 56, 94, 1);
      }
      .replyTime {
        display: inline-block;
        font-size: 14px;
        font-familyA: OpenSans;
        color: rgba(51, 56, 94, 1);
        margin-left: 37px;
      }
    }
  }
}
</style>